<template>
  <div class="goods-box">
    <nav-header></nav-header>
    <nav-bread>
      <span class="bread-item">Address</span>
    </nav-bread>
    <div class="address-content">
      <el-steps :active="1">
        <el-step title="确认地址"></el-step>
        <el-step title="查看订单"></el-step>
        <el-step title="支付"></el-step>
        <el-step title="订单确认"></el-step>
      </el-steps>
      <h1 class="shopping-address">收件地址</h1>
      <div class="address-main">
        <div class="address-box" 
             v-for="(item, index) of addressListFilter" 
             :key="item.addressId"
             :class="{'address-main-border':checkIndex == index}"
             @click="checkIndex = index"
        >
          <p class="addr-name">{{item.userName}}</p>
          <p class="address">{{item.postCode+item.streetName}}</p>
          <p>{{item.tel}}</p>
          <p class="default-address" v-if="item.isDefault">默认地址</p>
          <p class="default-address" v-if="!item.isDefault" @click="setDefaultAddress(item.addressId)">设置默认地址</p>
          <el-button type="info" icon="el-icon-delete" circle size="mini" class="del-btn" @click="handleDelete(item.addressId)"></el-button>
        </div>
        <div class="address-box addr-active" @click="dialogFormVisible = true">
          <div class="add"><span>+</span></div>
          <p class="new-addr">新增地址</p>
        </div> 
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="form" :label-position="right" label-width="150px">
            <el-form-item label="addressId" :label-width="formLabelWidth">
              <el-input v-model="form.addressId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="userName" :label-width="formLabelWidth">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="streetName" :label-width="formLabelWidth">
              <el-input v-model="form.streetName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="postCode" :label-width="formLabelWidth">
              <el-input v-model="form.postCode"></el-input>
            </el-form-item>
            <el-form-item label="tel" :label-width="formLabelWidth">
              <el-input v-model="form.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="isDefault" :label-width="formLabelWidth">
              <el-select v-model="form.isDefault" placeholder="是否设为默认地址">
                <el-option label="true" value="true"></el-option>
                <el-option label="false" value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit('form')">提 交</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="more-btn" @click="handleGetMoreAddress" v-if="limit == 3">展开 <div class="more-arrow">〉</div></div>
      <div class="more-btn" @click="handleGetMoreAddress" v-else>收起 <div class="more-arrow-else">〉</div></div>
      <h1 class="shopping-address">邮寄方式</h1>
      <div class="address-main">
        <div class="address-box address-main-border">
          <p class="addr-name">标准运输</p>
          <p class="address addr-name">自由</p>
          <p>发货后，商品将会在1-7个工作日到达指定地址</p>
        </div>
      </div>
      <div class="next-btn">
        <button class="btn" @click="toCheckOrder">NEXT</button>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import NavHeader from '@/components/Header'
import NavFooter from '@/components/Footer' 
import NavBread from '@/components/Bread'

export default {
  name: 'Address',
  
  components: {
    NavHeader,
    NavFooter,
    NavBread
  },
  data () {
    return {
      dialogFormVisible: false,
      checkIndex: 0,
      limit: 3,
      addressList: [],
      form: {
        addressId: '',
        userName: '',
        streetName: '',
        postCode: '',
        tel: '',
        isDefault: false
      }
    }
  },
  computed: {
    addressListFilter () {
      // 截取3条数据
      return this.addressList.slice(0,this.limit)
    }
  },
  methods: {
    // 获取地址
    getAddressList () {
      this.$axios.get('/api/users/address').then((res) => {
        let data = res.data
        if(data.status == '0') {
          this.addressList = data.result
        }
      })
    },
    handleGetMoreAddress () {
      if(this.limit == 3) {
        this.limit = this.addressList.length
      } else {
        this.limit = 3
      }
    },
    // 设置默认地址
    setDefaultAddress(id) {
      // console.log(id)
      this.$axios.post('/api/users/setDefaultAddr',{
        addressId:id
      }).then((res) => {
        let data = res.data
        if(data.status == '0') {
          // console.log('succ')
          this.getAddressList()
        }
      })
    },
    // 删除地址
    handleDelete(id) {
      this.$confirm("确认删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.post('/api/users/deleteAddress',{
        addressId:id
      }).then((res) => {
        let data = res.data
        if(data.status == '0') {
          this.getAddressList()
        }
      })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        })
      })
    },
    handleSubmit(form) {

    },
    toCheckOrder(){
      this.$router.push('/orderConfirm')
    }
  },
  mounted () {
    this.getAddressList()
  }

}
</script>

<style lang="stylus" scoped>
  .goods-box
    background #f5f7fc
    font-size 14px
    .bread-item
      color #409eff
    .address-content
      width 85%
      margin 0 auto
      padding 50px 0
    .shopping-address
      padding 20px 0
      font-size 18px
      letter-spacing 5px
      color #605f5f
    .address-main
      display flex
      flex-wrap wrap
      .address-box
        margin 10px 20px 20px 0
        width 23%
        height 160px
        border 2px solid #ccc
        padding 20px
        box-sizing border-box
        overflow hidden
        .addr-name
          font-weight bold
        .address
          line-height 50px
        .default-address
          color #ee7a23
          cursor pointer
          line-height 30px
          display inline-block
        .del-btn
          float right
      .address-main-border
        border 2px solid #ee7a23
      .add
        width 100%
        height 100px
        font-size 60px
        text-align center
        cursor pointer
      .new-addr
        text-align center
      .addr-active
        border 2px solid #ccc
      .addr-active:hover
        border 2px solid #ee7a23
    .more-btn
      width 50px
      margin 0 auto
      text-align center
      height 40px
      color #ee7a23
      cursor pointer
      font-size 17px
    .more-btn:hover
      color #d1434a
    .more-arrow
      transform rotate(90deg) 
    .more-arrow-else
      transform rotate(-90deg) 
    .next-btn
      width 100%
      height 60px
      .btn
        width 180px
        height 45px
        background #d1434a
        color #fff
        border none
        float right
        font-size 16px
        font-weight bold
        letter-spacing 2px
      .btn:hover
        background #f16f75
        transition all .3s ease-out
</style>
